<template>
<div class="user-support"> 
  <div v-show="supportList.length==0"  class="reminder-style">
      <img src="../assets/空列表@3x.png" alt="">
       <p>您还未参加过任何活动，赶紧去看下有哪些活动吧</p>
       <mt-button @click="submit" class="main-bgc" type="default">浏览活动</mt-button>
      </div>
  <ul v-show="supportList.length !=0" class="mui-table-view" v-for="(item,index) in supportList" :key="index">
        <li class="mui-table-view-cell mui-media">
              <a href="javascript:">
                  <img class="mui-media-object mui-pull-left" :src="item.userUrl">
                  <div class="mui-media-body">
                      <span class="text1">{{item.activityName || "您当前没有标题"}}</span>
                      <div class="mony-date-style">
                        <span class='mui-ellipsis'>支持{{item.money || 0}}元</span>
                        <span class="date">{{item.time | fmtDate}}</span>
                      </div>
                  </div>
              </a>          
        </li>
    </ul>
</div>
</template>
<script>
export default {
    data() {
        return {
            supportList: []
        }
    },
    created() {
        this.utils.$get(this.utils.GET_SUPPORT_LIST, data => {
            this.supportList = data.data
        })
    },
    methods: {
        submit() {
            this.$router.push({path:'/home/chips_list'})
        }
    }
}
</script>
<style lang="less">
.user-support {
    height: 100%;
    .reminder-style {
        padding: 0.5rem;
        height: 100%;
        background-color: #f5f5f5;
        text-align: center;
        margin-top: 0;
        > img {
            width: 4rem;
            height: 3.5rem;
            margin: 0 auto;
        }
        > p {
            text-align: center;
            font-size: 0.25rem;
            color: #333333;
            margin-top: 0.3rem;
        }
        .main-bgc {
            background-color: #00d8c9;
            margin-top: 0.3rem;
            width: 73%;
            color: #ffffff;
            border-radius: 1rem;
            letter-spacing: 0.02rem;
        }
    }
    .mui-table-view {
        .mui-table-view-cell {
            width: 100%;
            height: 2.22rem;
            padding: 0.2rem 0.2rem 0.1rem;
            // position:sticky !important;
            > a {
                height: 100%;
                .mui-media-object.mui-pull-left {
                    width: 1.4rem !important;
                    height: 1.4rem !important;
                    border-radius: 50%;
                    vertical-align: middle;
                    max-width: 1.4rem !important;
                    max-height: 1.4rem !important;
                    margin: 0.2rem;
                }
                .mui-media-body {
                    position: relative;
                    height: 100%;
                    .mony-date-style {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        padding-right: 0.3rem;
                        .mui-ellipsis {
                            // display: inline-block;
                            // padding-top:.5rem    !important;
                            font-size: 0.3rem;
                            color: #f93a3a;
                        }
                        .date {
                            //  display: inline-block;
                            //  padding-top:.5rem  !important;
                            font-size: 0.24rem;
                            color: #999999;
                            float: right;
                        }
                    }
                    .text1 {
                        padding-top: 0.15rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        white-space: normal !important;
                        font-size: 0.3rem;
                        color: #333333;
                    }
                }
            }
        }
    }
}
</style>

